<!-- 模型图层树面板 -->
<mxmodeltree>
    <div class="CgsSymbolTool__symbolTree CgsModelTool__modelTree">
        <ul ref="layertree"></ul>
    </div>
    <script>
        var tag = this
        var map = this.opts.map
        tag.map = map
        map.layertree = tag;
        tag.selectNode = {};
        tag.activeModelId = '';
        tag.initSymbolLayerData = [];//图层树数据
        tag.modelDrawTool = map.modelDrawTool;//模型相关数据集合
        tag.layers = tag.modelDrawTool.layers;//所有模型图层

        // 点击按钮新增图层
        mxEditLayerClick = function(){
          var editLayer = new CgsModelEditLayer(map);
          editLayer.activate();
          map.editLayer.editLayerName(tag.node);
        }

        // 删除模型或图层
        tag.handleDeleteLayer = function (num) {
          //移除所有模型
          if(num===0){
            tag.layers.forEach((item,index)=>{
              var models = tag.layers[index].getAllFeatures();
              models.forEach(child=>{
                item.removeFeature(child);
              })
              //隐藏模型操作层
              map.modelDrawTool.moveCircleVisible(false);
            })  
          }else{
            var currentNode = tag.treeUI.tree('getSelected');
            if (!currentNode) return;
            //移除选中图层或模型
            if (currentNode.type == "layer") { // 删除图层节点
                var layerId = currentNode.id;
                tag.layers.forEach((item,index)=>{
                  if(item._id==layerId){
                    if(tag.modelDrawTool.activeLayerId==layerId&&index>0){
                      if(index>0){
                        tag.modelDrawTool.activeLayerId = tag.layers[index-1]._id;
                      }else{
                        tag.modelDrawTool.activeLayerId = '';
                      }
                    }
                    map.removeLayer(layer);
                    tag.layers.splice(index,1);
                  }
                })
            } else if (currentNode.type == "node") { // 删除模型节点
                tag.layers.forEach((item,index)=>{
                  var models = tag.layers[index].getAllFeatures();
                  let m = models.find(child=>child.getId()==tag.activeModelId);
                  if(m){
                    item.removeFeature(m);
                  }
                })  
            }
          }
          tag.createLayerTree();
        }

        // 导出图层
        tag.handleExportLayer = function () {
          var data = JSON.stringify(tag.treeUI.tree('getRoots'));
          var blob = new Blob([data],{type:'text/json'});
          var scenef = new File([blob], 'modelTree.json', { type: blob.type });
          //使用FileSaver.js提供的saveAs函数，通过浏览器的默认下载工具将字符串保存为本地文件
          saveAs(scenef);
        }
        // 导入图层
        tag.handleInportLayer = function () {
          var fr = new FileReader();
          fr.onload = function () {
              var sceneData = this.result;
              tag.initSymbolLayerData = JSON.parse(sceneData);
              tag.renderTree();
          };
          inputF = $$("<input type='file'>");
          inputF.change(function () {
              var f = this.files[0];
              fr.readAsText(f);
          });
          inputF.click();
        }

        tag.createLayerTree = function(){
            tag.initSymbolLayerData=[];
            var layers = tag.layers;
            if(layers&&layers.length>0){
              for (var i = 0; i < layers.length; i++) {
                  var layerId = layers[i]._id;
                  if (layerId) {
                      var layerName = layers[i]._attr.name;
                      var item = {
                          id: layerId,
                          type: "layer",
                          checked: true,
                          text: layerName,
                          iconCls: "icon-blank",
                          children: []
                      }
                      var models = layers[i].getAllFeatures();
                      for (var j = 0; j < models.length; j++) {
                        let model = models[j];
                          if (model) {
                              var child = {
                                  id: model.getId(),
                                  type: "node",
                                  text: model.getName(),
                                  checked: true,
                                  iconCls: "icon-blank"
                              }
                              item.children.push(child)
                          }
                      }
                      tag.initSymbolLayerData.push(item);
                  }
              }
              tag.renderTree();
            }
        }




        tag.on('mount', function () {
            var $$ = ((!window.$$.fn.draggable) || (window.$$.fn.draggable.length === 1)) ? (window.$) : (window.$$); //easy ui 的痛
            tag.treeUI = $$(tag.refs.layertree);
            // 获取当前的军标数据
            tag.modelDrawTool.createModelLayer('默认');

            // 根据id添加图层
            // function addLayerById(id) {
            //     if (!map.jmpManage) {
            //         new CgsJmpManage(map)
            //     }
            //     var layerName = map.jmpManage.getLayerNameById(id)
            //     var item = {
            //         id: id,
            //         type: "layer",
            //         checked: true,
            //         text: layerName,
            //         iconCls: "icon-blank",
            //         children: []
            //     }
            //     tag.treeUI.tree('append', {
            //         data: [item]
            //     })
            //     tag.update()
            // }

            // 根据id移除军标图层,设置激活图层为
            // function deleteLayerById(layerId) {
            //     var node = tag.treeUI.tree('find', layerId);
            //     if (node) {
            //       tag.treeUI.tree('remove', node.target);
            //       var ids = map.jmpManage.getAllLayerIds();
            //       var firstId = ids[0];
            //       tag.treeUI.tree('select', tag.treeUI.tree('find', firstId).target)
            //       tag.treeUI.tree('check', tag.treeUI.tree('find', firstId).target)
            //     }
            // }

            // 监听军标新增的上图方法
            // function addSymbol(symbol) {
            //     var nodeAttr = symbol.getNodeAttrs();
            //     var layerId = symbol.layerId || symbol.node.layer.id;
            //     var child = {
            //       id: nodeAttr.uid,
            //       type: "node",
            //       text: nodeAttr.name,
            //       checked: true,
            //       iconCls: "icon-blank"
            //     }
            //     var treeNode = tag.treeUI.tree('find', layerId);
            //     treeNode && tag.treeUI.tree('append', {
            //       parent: treeNode.target,
            //       data: [child]
            //     })
            // }

            // 监听军标移除
            // function deleteSymbol(symbolId) {
            //     var node = tag.treeUI.tree('find', symbolId);
            //     if (node) {
            //       tag.treeUI.tree('remove', node.target);
            //     }

            // }

            // 根据军标id设置军标显隐
            // function setSymbolVisibleById(id, checked) {
            //   var symbol = map.getSymbolByUid(id);
            //   symbol && symbol.setVisible(checked)
            // }

            tag.renderTree();
        })
        tag.editTagListener = function(){
          let target = $$('#mxEditLayerName');
          if(target){
            target.bind("click",function(){
              target.remove();
            })
          }
        }
        tag.renderTree = function(){
            var laytreeInit = setInterval(function () {
                // 根据数据初始化图层树
                tag.treeUI.tree({
                    data: tag.initSymbolLayerData,
                    animate: true,
                    checkbox: true,
                    // check框切换触发事件
                    onCheck: function (node, checked) {
                        var layers = tag.layers;
                        if (node.type == "layer") { // 图层显影
                            var currentLayer = layers.find(item=>item._id==node.id);
                            currentLayer.setVisible(checked);
                        } else if (node.type == "node") {// 模型显影
                            layers.forEach((item,index)=>{
                              var models = layers[index].getAllFeatures();
                              models.forEach(child=>{
                                if(child.getId()==node.id){
                                  child.setVisible(checked);
                                }
                              })
                            })
                        }
                    },
                    // 右键点击事件
                    onContextMenu: function (e, node) {
                        tag.node = node;
                        e.preventDefault();
                        let p = $$('#mxEditLayerName');
                        if(p){
                          p.remove();
                        }
                        if(node && node.type == "layer"){
                          $$(e.target).append("<div id='mxEditLayerName'><p onclick='mxEditLayerClick()'>编辑</P></div>");
                          $$('#mxEditLayerName p').css({
                            left:e.pageX,
                            top:e.pageY
                          })
                          tag.editTagListener();
                        }
                    },
                    // 格式化显示label
                    // formatter: function(node) {
                    //     return "<span class='node-group'>" + node.text +
                    //         "<span onclick='handleClick()'>新增</span>" +
                    //         "</span>"
                    // },

                    // 选中一个节点时的点击事件(左键点击节点)
                    onSelect: function (node) {
                        if (node && node.type == "layer") { // 选中图层节点
                            let activeId = tag.modelDrawTool.activeLayerId;
                            if (node.id !== activeId) {
                                tag.modelDrawTool.activeLayerId = node.id;
                            }
                        } else if (node && node.type == "node") { // 选中模型
                            var nodeId = node.id;
                            if (nodeId !== tag.activeModelId) {
                                tag.activeModelId = nodeId;
                                var layers = tag.layers;
                                layers.forEach((item,index)=>{
                                  var models = layers[index].getAllFeatures();
                                  models.forEach(child=>{
                                    if(child.getId()==nodeId){
                                      let position = child.getPosition();
                                      map.flyTo({
                                        destination: [position[0], position[1], 60000],
                                        noFlyHigher: true,
                                        rotation: [0.0, -90.0, 0.0],
                                        duration: 1.0
                                      });
                                    }
                                  })
                                })

                            }
                        }
                    },
                    // 当数据加载成功时
                    onLoadSuccess: function () {
                        // 军标图层新增监听
                        // CgsSubPub.subscribe(CgsEvent.eSymbolLayerAdd, function (e, layerId) {})
                        // 军标图层删除监听
                        // CgsSubPub.subscribe(CgsEvent.eSymbolLayerDeleted, function (e, layerId) {
                        //     deleteLayerById(layerId)
                        // })
                        // 军标新增监听
                        // CgsSubPub.subscribe(CgsEvent.eSymbolAdd, function (e, symbol) {
                        //     addSymbol(symbol)
                        // })
                        // 军标删除监听
                        // CgsSubPub.subscribe(CgsEvent.eSymbolDelete, function (e, id) {
                        //     deleteSymbol(id)
                        // })
                    }
                })
                clearInterval(laytreeInit)
            }, 100)
        }
    </script>
</mxmodeltree>
